<template>
    <div class="pcard-wrap on">
        <div class="main-info">
            <div class="top">
                <span>欧阳安俊</span>
                <span class="number">402068</span>
                <div class="icon-wrap">
                    <i class="icon-hypertension"></i>
                    <i class="icon-diabetes"></i>
                    <i class="icon-pcard"></i>
                </div>
            </div>
            <div class="content-info">
                <p>
                    <span>时间：03:30</span>
                    <span>
                        <span class="state cold on">感</span>
                        <span class="state acute on">急</span>
                        <span class="state cv on">CV</span>
                    </span>
                </p>
                <p>
                    <span>麻醉：全麻</span>
                    <span>年龄：88岁</span>
                </p>
                <p>
                    <span>类别：日间（702）</span>
                    <span>术者：何秒春</span>
                </p>
            </div>
        </div>
        <div class="other-info">
            <span>核查护士：玛丽</span>
            <span>03:30:00</span>
            <i class="icon-selected"></i>
        </div>
    </div>
</template>

<script lang="ts">
import Component from 'vue-class-component'
    import {
        Prop,
        Vue
    } from 'vue-property-decorator';

    @Component({
        props: {
            
        }
    })

    export default class Pcard extends Vue {
        data () {
            return {
                
            }
        }
    }
</script>

<style lang="scss" scoped>
    .pcard-wrap{
        width: 260px;
        // height: 160px;
        border-radius: 10px;
        box-shadow: 0 0 5px rgba($color: #000000, $alpha: 0.2);
        border-bottom: 10px solid #04a9ad;
        color: #666;
        text-align: left;
        .main-info{
            padding: 0 15px;
            .top{
                border-bottom: 1px solid #cbcbcb;
                font-size: 18px;
                padding: 10px 0;
                .number{
                    background: #007a00;
                    color: #FFF;
                    border-radius: 5px;
                    margin-left: 15px;
                    padding: 2px 10px;
                    font-size: 15px;
                }
                .icon-wrap{
                    float: right;
                    i{
                        display: inline-block;
                    }
                    i+i{
                        margin-left: 5px;
                    }
                    .icon-pcard{
                        width: 24px;
                        height: 26px;
                        background: url(../../assets/img/icon/check/message/binglishi.png) no-repeat;
                        background-size: cover;
                        vertical-align: -5px;
                    }
                    .icon-hypertension{
                        width: 18px;
                        height: 18px;
                        background: url(../../assets/img/icon/hypertension.png) no-repeat;
                        background-size: cover;
                        vertical-align: -3px;
                    }
                    .icon-diabetes{
                        width: 18px;
                        height: 18px;
                        background: url(../../assets/img/icon/diabetes.png) no-repeat;
                        background-size: cover;
                        vertical-align: -3px;
                    }
                }
            }
            .content-info{
                padding: 10px 0;
                font-size: 12px;
                p+p{
                    margin-top: 5px;
                }
                span{
                    display: inline-block;
                    width: 50%;
                }
                .state{
                    width: auto;
                    width: 28px;
                    text-align: center;
                    height: 28px;
                    line-height: 28px;
                    border-radius: 2px;
                    background-color: #999;
                    font-size: 18px;
                    font-weight: 400;
                    color: #FFF;
                    margin-right: 5px;
                }
                .cold.on{
                    background-color: #f0c900;
                }
                .acute.on{
                    background-color: #ff5350;
                }
                .cv.on{
                    background-color: #5a56ce;
                }
            }
        }
        .other-info{
            background-color: #e9f5f2; 
            padding: 0 15px;
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            span+span{
                margin-left: 30px;
            }
            .icon-selected{
                display: none;
                width: 20px;
                height: 20px;
                background: #FFF url(../../assets/img/icon/selected.png) no-repeat;
                background-size: cover;
                margin-top: 5px;
                float: right;
            }
        }
    }
    .pcard-wrap.on{
        box-shadow: 0 2px 15px rgba(250, 33, 33, 0.7);
        .other-info{
            .icon-selected{
                display: inherit;
            }
        }
    }
</style>